<meta charset="utf-8"/>
<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-12">
        <div class="col-xs-12" style="padding-right:6px"><!--控制有水平滚动条的内边距-->
          <div class="col-xs-12">
            <div class="col-xs-3 div_scrollbar_role" style="margin-left:-9px;margin-top:4px;" id="div_left"><!--水平滚动条-->
              <div class="col-xs-12">
                <ul id="ulTreeSys_area" class="ztree" style="padding:0px;"></ul>
              </div>
            </div>
            <div class="col-xs-9">
              <div class="col-xs-12" style="margin-top:4px" id="div_right_top">
                <div class="col-xs-12">
                  <div style="width:100%;height:100%;">
                    <div style="min-height:146px;position:relative;" id="div_table_container">
                      <div style="position:absolute;left:0;top:0;right:-17px;bottom:0;overflow-x:auto;overflow-y:auto;">
                        <div style="min-width:1024px">
                          <table class="table table-striped table-bordered table-hover" id="tableListPartner">
                            <tbody>
                            <tr>
                              <td style="text-align:center;height:37px">请选择区域</td>
                            </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="childData"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="display:none;">
  <input type="hidden" id="proxy_btn_listData"/>
  <input type="hidden" id="proxy_row_edit"/>
  <input type="hidden" id="proxy_row_queryById"/>
</div>
<div id="div_user_edit" style="display:none;padding:20px 0px;">
  <form class="form-horizontal" id="form_user_edit" role="form">
    <label class="col-sm-3 control-label no-padding-right" for="user_name"><div class="hr-1"></div>登录账号</label>
    <div class="col-sm-7">
      <input type="text" id="user_name" placeholder="登录账号" disabled="disabled" class="form-control"/>
    </div>
    <label class="col-sm-3 control-label no-padding-right" for="user_password"><div class="hr-4"></div>登录密码</label>
    <div class="col-sm-7"><div class="hr-4"></div>
      <input type="password" id="user_password" placeholder="登录密码" class="form-control" />
    </div>
    <label class="col-sm-3 control-label no-padding-right" for="verify_password"><div class="hr-4"></div>确认密码</label>
    <div class="col-sm-7"><div class="hr-4"></div>
      <input type="password" id="verify_password" placeholder="确认密码" class="form-control"/>
    </div>
  </form>
</div>
<script type="text/javascript">

  var childHtml = '';
  childHtml += '<div class="col-xs-12" style="margin-top:4px">';
    childHtml += '<div class="col-xs-12">';
      childHtml += '<div style="width:100%;height:100%;">';
        childHtml += '<div style="min-height:824px;position:relative;">';
          childHtml += '<div style="position:absolute;left:0;top:0;right:-17px;bottom:0;overflow-x:auto;overflow-y:auto;">';
            childHtml += '<div style="min-width:1024px">';
              childHtml += '<table class="table table-bordered table-hover" id="tablelist_partner_child">';
                childHtml += '<tbody>';
                childHtml += '<tr>';
                  childHtml += '<td style="text-align:center;height:37px">请选择区域</td>';
                childHtml += '</tr>';
                childHtml += '</tbody>';
              childHtml += '</table>';
            childHtml += '</div>';
          childHtml += '</div>';
        childHtml += '</div>';
      childHtml += '</div>';
    childHtml += '</div>';
  childHtml += '</div>';

  $(function($){
    var urlRoute = '/proxy/';/*请求controller层的url*/
    var getList = urlRoute + 'listData';/*获取数据列表*/
    var urlProxyTree = urlRoute + 'getProxyTree';
    var urlEdit = urlRoute + 'editUser';/*修改密码重置密码*/
    var domTreeSys_area = 'ulTreeSys_area';//ztree的dom节点
    var objzTreeSys_area = null;//ztree对象
    var query_kid = null;
    var query_grade = null;
    var jqChildData = $('#childData');
    var ztreeConfigSys_area = areaDept.initAreaDom({
      method : 'GET',
      param : ['kid','grade'],
      url : urlProxyTree,
      dataFilter : function(data){
        if(AppKey.code.code198 == data.code){
          $('#div_left').remove();//移除左部分
          $('#div_right_top').remove();//移除右边的上部分
          layerFn.closedAll();
          jqChildData.html(childHtml);//渲染
          thisPage.bottomShow(data.data);
        }else{
          layerFn.handleResult(data.msg,data.code,-1);
        }
      },
      callback : {
        onClick : function(event,treeId,node){
          query_kid = node.kid;
          query_grade = node.grade;
          //1.登录账号是管理员且是中国大陆时,仅显示上部分
          //2.登录账号是管理员且非中国大陆时,显示上下两部分，①，当为省级时，上部分显示的已选中的省代，下部分是市代；②当为市时，上部分显示的已选中的市代，下部分是区代；③当为区代时，上部分显示的已选中的区代，下部分是门店列表；
          //3.登录账号非管理员时，
          //当是省代时，点击市级是，①上部分显示的市代，下部分没有;②点击区代时上面是区代，下部分是直营门店;
          // 当是区代时仅显示下部分
          thisPage.initTable();
          if('888888888888888888' != query_kid){
            //$('#tablelist_partner_child').show();
            //thisPage.showChildData();
            $('#div_table_container').css("min-height","146px");
            jqChildData.html(childHtml);//渲染
          }else{
            //$('#tablelist_partner_child').slideToggle('slow');
            //$('#tablelist_partner_child').hide();
            //清空数据
            //$('#tablelist_partner_child thead').remove();
            $('#div_table_container').css("min-height","824px");
            jqChildData.empty();//清空
          }
        },
        beforeAsync : function(treeId,node){
          if(node == undefined){
            self.layerIndex = layerFn.loading('正在处理……');
          }
        },
        onAsyncSuccess : function(event,treeId,node,data){
          if(node == undefined){
            layerFn.closeIndex(self.layerIndex);
          }
        },
        beforeClick : function(treeId,node,clickFlag){
          return true;//true时点击选中文本
        },
        onAsyncError : function(event,treeId,node,XMLHttpRequest){
          if(node == undefined){//此时ztree节点尚未生成
            layerFn.alert('连接服务器失败',AppKey.code.code199);
          }else{
            //thisPage.ztreeErrorSys_area('连接服务器失败');
            //console.log(treeId,node);//ok
            layerFn.handleResult('连接服务器失败',AppKey.code.code199,-1);
          }
        }
      }
    });
    var tableDom = '#tableListPartner';
    var thisTable = null;
    thisPage = {
      init : function(){
        this.addEvent();
        this.initDom();
        this.initScrollbarRole(".div_scrollbar_role");
      },
      initScrollbarRole : function(dom){
        $(dom).mCustomScrollbar({
          axis:"x",
          scrollbarPosition:"outside",
          advanced:{autoExpandHorizontalScroll:true}
        });
      },
      addEvent : function(){
        //重置按钮
        $('#btnReset').on('click', function(){
          $('#key_phone').val('');
          $('#key_real_name').val('');
          $('#key_id_card').val('');
        });
        //搜索按钮
        $('#btnSearch').on('click', function(){
          thisPage.search();
        });
      },
      initDom : function(){
        authHandler('proxy_btn_getProxyTree', function(){
          objzTreeSys_area = $.fn.zTree.init($("#"+domTreeSys_area),ztreeConfigSys_area);
        }, function(){
          thisPage.ztreeErrorSys_area('暂无访问权限');
          //$('#viewRoot').css({"display":"none"});
        });
      },
      ztreeErrorSys_area : function(msg){
        msg = (msg == null || msg == '') ? '获取数据失败' : msg;
        $("#"+domTreeSys_area).html("<li style='margin-top:2px;margin-left:4px'><span>"+msg+"</span></li>");
      },
      initTable : function(){
        var aoColumns = [];
        aoColumns.push({
          data : "type",
          sortable : false,
          width : "112px",
          title : "代理类型",
          render : function(value,type,row,meta){
            switch (value){
              case 1:
                return '省级分公司';
              case 2:
                return '市级分公司';
              case 3:
                return '区县级代理';
              default:
                return '';
            }
          }
        });
        aoColumns.push({
          data : "user_name",
          sortable : false,
          width : "200px",
          title : "登录账号"
        });
        aoColumns.push({
          data : "real_name",
          sortable : false,
          width : "200px",
          title : "真实姓名"
        });
        aoColumns.push({
          data : "id_card",
          sortable : false,
          width : "150px",
          title : "身份证号码"
        });
        aoColumns.push({
          data : "phone",
          sortable : false,
          width : "170px",
          title : "联系电话"
        });
        aoColumns.push({
          data : "country_name",
          sortable : false,
          width : "110px",
          title : "国家名称"
        });
        aoColumns.push({
          data : "proxy_area",
          sortable : false,
          title : "区域",
          className : 'hidden-480',
          render : function(value,type,row,meta){
            switch (row.type){
              case 1:
                return row.province_name;
              case 2:
                return row.province_name + row.city_name;
              case 3:
                return row.province_name + row.city_name + row.county_name;
              default:
                return '';
            }
          }
        });
        aoColumns.push({
          data : "_kid_",
          width : "75px",
          title : "<label style='color:#000;margin-left:6px;' title='单行操作'>选项</label>",/*此处的字‘操作选项’请勿修改,此处的文字还有其它用途*/
          sortable : false
        });
        var columnDefs = [];
        columnDefs.push({
          targets : -1,
          render : function(value,type,row,meta){
            var bl = (row.type == 3) || (row.type == 4);
            return "<a title='编辑|修改' href='javascript:thisPage.rowEdit("+ meta.row +");' style='outline:none;text-decoration: none;color:#3b8cff;margin-left:4px;display:none' permission='proxy_row_edit'>编辑</a>"
            + (bl ? "<a title='查看订单' href='javascript:;' onclick='thisPage.targetPage(\""+row.user_id+"\");' style='outline:none;text-decoration: none;color:#f56c6c;margin-left:4px;display:none;' permission='proxy_row_view'>订单</a>" : '');
            /*var html = "";//若是操作选项有多个时则试试下面的方式
            html += "<div style='margin:-10px -2px -10px -2px'><span class='input-group-btn'>";
            html += "<button data-toggle='dropdown' class='btn btn-primary btn-white dropdown-toggle' style='margin-left:0px;border:none' title='更多选项'>";
            html += "<span style='margin-left:-4px;margin-right:4px;padding-right:-20px'>操作选项</span>";
            html += "<i class='ace-icon fa fa-angle-down'></i>";
            html += "</button>";
            html += "<ul class='dropdown-menu dropdown-info dropdown-menu-right' style='margin-left:-1px;width:93px;min-width:93px;'>";
            html += "<li style='display:none' permission='proxy_row_edit' title='编辑当前行'><a href='javascript:thisPage.rowEdit(" + meta.row + ");'>编辑</a></li>";
            html += "<li style='color:#f00;display:none' permission='proxy_row_delById' title='删除当前行'><a href='javascript:thisPage.rowDel(" + meta.row + ");'>删除</a></li>";
            html += "</ul>";
            html += "</span>";
            html += "</div>";
            return html;*/
          }
        });
        columnDefs.push({
          targets : [0,1,2,3,4,5,6,7],
          render : function(value,type,row,meta){
            return pageDataTable.formatColumn(value);
          }
        });
        columnDefs.push({
          visible : false,//列的隐藏显示
          targets : []//指定列索引
        });
        thisTable = pageDataTable.initDataTable({
          tableDom : tableDom,
          sAjaxSource : getList,
          fnServerParams : function(params){
            params.push(
              {"name":"phone","value":winFn.getDomValue('#key_phone')},
              {"name":"real_name","value":winFn.getDomValue('#key_real_name')},
              {"name":"id_card","value":winFn.getDomValue('#key_id_card')},
              {"name":"query_kid","value":query_kid},
              {"name":"query_grade","value":query_grade}
            );
          },
          aoColumns : aoColumns,
          columnDefs : columnDefs,
          complete : function(settings,data){},//仅执行一次
          footer : function(data,start,end,thLength){},//每次都会执行
          drawCallback : function(settings){
            var attach = settings.jqXHR.responseJSON.attach || null;
            thisPage.bottomShow(attach);
          },
          selected : function(selected){
            if(selected){
              //$('#btnDel').removeAttr('disabled');//默认在该button添加属性disabled="disabled"
            }else{
              //$('#btnDel').attr('disabled','disabled');
            }
          }
        });
        $('.dataTables_scroll .dataTables_scrollBody').removeAttr('style');//解决dataTable表头下拉框被tbody遮挡
      },
      bottomShow : function(attach){
        if(attach == null) return;//为空时直接返回,仅适用于点击‘中国大陆’
        var grade = attach.grade;
        var html = '';
        html += '<thead>';
        html += '<tr>';
        html += thisPage.tableHead(grade);//动态生成表头
        html += '</tr>';
        html += '</thead>';
        var list = attach.list || [];//此处是便于没有区县的地级市查询门店
        if(list.length == 0){
          html += '<tbody>';
          html += '<tr>';
          html += '<td colspan=\''+(grade == 3 ? "6" : "7")+'\' style="text-align:center;height:37px">暂无数据</td>';
          html += '</tr>';
          html += '</tbody>';
          $('#tablelist_partner_child').html(html);
          return;
        }
        html += thisPage.tableTbody(grade,list);////动态生成表体
        $('#tablelist_partner_child').html(html);
      },
      //生成表头
      tableHead : function(grade){
        if(grade == 3){
          return '<td>门店名称</td><td>联系人</td><td>联系电话</td><td>行政区域</td><td>门店地址</td><td style="width:40px">选项</td>';
        }else{
          return '<td>姓名</td><td>身份证号码</td><td>联系电话</td><td>国家</td><td>行政区域</td><td>地址</td><td style="width:40px">选项</td>';
        }
      },
      //生成表体
      tableTbody : function(grade,list){
        var html = '';
        if(grade == 3){
          html += '<tbody>';//仅需一个
          for(var b = 0; b < list.length; b++){
            var objValueKey = list[b];
              html += '<tr style="height:37px">';//多行
                //需要出现省略号,属性max-width的值要比width的值少6px,才出现省略号
                html += '<td>'+objValueKey.name+'</td><td>'+objValueKey.contacts+'</td><td>'+objValueKey.telephone+'</td><td>'+objValueKey.province_name+objValueKey.city_name+objValueKey.county_name+'</td><td style="height:37px;width:326px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;">'+objValueKey.address+'</td><td><a title="查看订单" href="javascript:;" onclick="thisPage.targetPage(\''+objValueKey.user_id+'\',\''+objValueKey.kid+'\');">订单</a></td>';
              html += '</tr>';
          }
          html += '</tbody>';
          return html;
        }else{
          html += '<tbody>';//仅需一个
          for(var c = 0; c < list.length; c++){
            var objValue = list[c];
              html += '<tr style="height:37px;">';//多行
                html += '<td>'+objValue.real_name+'</td><td>'+objValue.id_card+'</td><td>'+objValue.phone+'</td><td>'+objValue.country_name+'</td><td>'+objValue.province_name+objValue.city_name+objValue.county_name+'</td><td style="height:37px;width:326px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;">'+objValue.address+'</td><td><a title="查看订单" href="javascript:;" onclick="thisPage.targetPage(\''+objValue.user_id+'\',\''+objValue.kid+'\');">订单</a></td>';
              html += '</tr>';
          }
          html += '</tbody>';
          return html;
        }
      },
      rowEdit : function(rowIndex){
        var row = thisTable.row(rowIndex).data();
        thisPage.editUserDialog(row.user_id,row.user_name);
      },
      targetPage : function(userId,storeId){
        sessionStorage.setItem('userId',userId);
        if(storeId){
          sessionStorage.setItem('storeId',storeId);
        }else{
          sessionStorage.removeItem('storeId');
        }
        window.open('/order.html','_blank').location;
      },
      editUserDialog : function(user_id,user_name){
        if(verifyFn.inputRequired('#proxy_row_edit')){
          layerFn.alert('没有操作权限',AppKey.code.code199);
          return;
        }
        layerFn.addOrEdit('设置密码|重置密码','#div_user_edit',['410px','240px'],function(layerIndex,layero){
          if (verifyFn.inputRequired('#user_password')){
            layerFn.alert('请输入账号密码',AppKey.code.code199);
            return;
          }
          if (verifyFn.inputRequired('#verify_password')){
            layerFn.alert('请输入确认密码',AppKey.code.code199);
            return;
          }
          var password = winFn.getDomValue('#user_password');
          var verify = winFn.getDomValue('#verify_password');
          var bl = verifyFn.checkEqual(password,verify);
          if(bl){
            layerFn.alert('你输入的两次密码不一致',AppKey.code.code199);
            return;
          }
          var params = {
            user_password : winFn.getDomValue('#user_password'),
            verify_password : winFn.getDomValue('#verify_password'),
            userId : user_id
          };
          layerFn.submit(urlEdit,params,function(data){
            thisPage.complete(data,layerIndex,false);
          });
        });
        winFn.clearFormData('#form_user_edit');
        if(user_id != null){
          $('#user_name').val(user_name);
          $("#user_name").css("cursor","not-allowed");
        }
      },
      search : function(){
        if(verifyFn.inputCheck('#proxy_btn_listData','没有操作权限')) return;
        thisTable.draw();
      },
      complete: function(data,index,search){
        try{
          if(index){
            layerFn.closeIndex(index);
          }
          if(search){
            thisPage.search();
          }
          if(data){
            layerFn.handleResult(data.msg,data.code);
          }
        }catch(e){}
      }
    }
    thisPage.init();
    $('script').remove();
  });
</script>